import React, { Component } from 'react'

export default class App extends Component {

    // 存放状态变量
    // state = {
    //     text: '收藏',
    //     flag: true
    // }

    // 第二种定义状态的方法
    constructor() {
        super() // 通过super继承之前的成员属性，否则直接定义this.state会报错
        this.state = {
            text: '收藏',
            flag: true,
            myName: 'Mr.Liu'
        }
    }

    render() {
        // let text = '收藏' // 没法找个临时变量实现功能，因为不是响应式的

        return (
            <div>
                <h1>欢迎来到react开发 -- {this.state.myName}</h1>
                <button onClick={() => {
                    // this.state.text = '取消收藏' // 不能直接修改state里面的属性
                    // 必须用 setState 来修改状态变量 => 告诉 react 来间接修改
                    // this.setState({ text: '取消收藏' })
                    this.setState({ flag: !this.state.flag, myName: '刘先生' })

                    if (this.state.flag) {
                        // 收藏的逻辑
                        console.log('收藏的逻辑');
                    } else {
                        // 取消收藏的逻辑
                        console.log('取消收藏的逻辑');
                    }


                }}>{this.state.flag ? '收藏' : '取消收藏'}</button>
            </div>
        )
    }
}
